import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import './NativeTabBar.css';

const NativeTabBar: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { pathname } = location;

  const tabs = [
    {
      key: '/',
      title: '首页',
      icon: '🏠',
    },
    {
      key: '/contacts',
      title: '通讯录',
      icon: '👥',
    },
    {
      key: '/MeetingRoomWrapper',
      title: '会议',
      icon: '💬',
    },
    {
      key: '/ai',
      title: 'AI',
      icon: '🤖',
    },
  ];

  // 获取当前激活的标签
  const getActiveKey = () => {
    if (pathname === '/') return '/';
    const tab = tabs.find(t => pathname.startsWith(t.key));
    return tab ? tab.key : '/';
  };

  return (
    <div className="native-tab-bar">
      {tabs.map(tab => (
        <div
          key={tab.key}
          className={`tab-item ${getActiveKey() === tab.key ? 'active' : ''}`}
          onClick={() => navigate(tab.key)}
        >
          <div className="tab-icon">{tab.icon}</div>
          <div className="tab-title">{tab.title}</div>
        </div>
      ))}
    </div>
  );
};

export default NativeTabBar;
